<template>
  <div>
      <h4>欢迎光临_vue开发的收银系统_水果店</h4>
      <div id="one">
        <div id=son1>
          苹果10￥/斤,折扣8折
        </div>
        <div id=son2>
         请输入你要购买的斤数:
         <input type="number" v-model="nums">
        </div>
      </div>
      <div id="two">
        <button @click="addFn">结账买单</button>
      </div>
      <div>结账单:总价格:{{ price }}￥元
           折扣价:{{ price*0.8 }}￥元
           省了:{{ price*0.2 }}￥元
      </div>
  </div>
</template>

<script>
export default {
      data(){
        return{
            nums:0, 
            price:0 
        }
      },
      methods:{
        addFn(){
            this.price = this.nums*10
        }
      }
}
</script>

<style>

</style>